<!DOCTYPE HTML>
<#assign base=request.contextPath />
<html>
<head>
    <title>Getting Started: Serving Web Content</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script type="text/javascript" src="${base}/js//bootstrap.min.js"></script>
</head>

<body>
	<div id="main">
		<div v-for="fund in fundList" id="{{fund.id}}_main">
			<form class="form-inline">
				<a class="btn btn-default" href="#" role="button" @click="updateFundOne(fund.id)">更新</a>
				  <input type="date" v-model="startDate" class="form-control" placeholder="开始日期">
				    <input type="date" v-model="endDate"  class="form-control" placeholder="结束日期">
				    <a class="btn btn-default" href="#" role="button" @click="queryFundOne(fund.id)">查询</a>
				<div id="{{fund.id}}" style='height:600px'>{{fund.id}}</div>
			</form>
		</div>
	</div>
	
<script type="text/javascript"  src="//cdn.bootcss.com/echarts/3.4.0/echarts.js"></script>
<script src="//cdn.bootcss.com/jquery/3.2.0/jquery.js"></script>
<script type="text/javascript" src="${base}/js/vue.min.js"></script>
<script type="text/javascript" src="${base}/js/vue-resource.min.js"></script>

   <script type="text/javascript">
   		var detailUrl  = "/funddata/findFundDataByCode?code=";
   		var listUrl="/funddata/findFundAll?page=1&size=10";
   		Vue.http.options.emulateJSON = true;
   		var v = new Vue({
   		  el: '#main',
   		  data: {
   			fundList: [],
   			startDate:'',
   			endDate:''
   		  },
   		 methods:{
   			 loadFundList:function(){
   				 this.$http.get(listUrl).then(function(result){
   					 this.$set('fundList',result.data.data);
   			 		 this.$nextTick(function () {
 			  			$(this.$get("fundList")).each(function(){
 			  				var _option = createOption(this.id,this.name);
 		   	    			var myChart = echarts.init(document.getElementById(this.id));
 		   	    	        // 使用刚指定的配置项和数据显示图表。
 		   	    	        myChart.setOption(_option);
 		   	    	        initDetailFundData(this.id,myChart);
 			  			})
 			  	      }) 
   				 })
   			 },
   			updateFundOne:function(code){
   				var url = "${base}/funddata/updateOne?code="+code+"&startDate="+this.$get("startDate")+"&endDate"+this.$get("endDate");
   				this.$http.get(url).then(function(result){
   					queryFundOne(code);
   				});
   			},
   			queryFundOne:function(code){
   				var url = "${base}/funddata/queryFundDataByCode?code="+code+"&startDate="+this.$get("startDate")+"&endDate"+this.$get("endDate");
   				var  _myChart = echarts.getInstanceByDom(document.getElementById(code));
   				this.$http.get(url).then(function(result){
	   				 var _data = [];
	   	   	       	 var _fundDate=[];
	   	   	       	 $(result.data.data).each(function(){
	   	   	       		 _data.push(this.unitValue);
	   	   	       		_fundDate.push(this.fundDate);
	   	   	       	 })
	   	   	       	 _myChart.setOption({
	   	   	       			 series: [{
	   	   	       		            data: _data
	   	   	       		        }],
	   	   	       		     xAxis:{
	   	   	       		    	 data:_fundDate
	   	   	       		     }
	   	   	       	 }
	   	   	       	 ); 
   				});
   			}
   		  }
   		});
   		v.loadFundList();
   		function initDetailFundData(code,_myChart){
   	    	$.getJSON(detailUrl+code,function(result){
   	   	       	 var _data = [];
   	   	       	 var _fundDate=[];
   	   	       	 $(result.data).each(function(){
   	   	       		 _data.push(this.unitValue);
   	   	       		_fundDate.push(this.fundDate);
   	   	       	 })
   	   	       	 _myChart.setOption({
   	   	       			 series: [{
   	   	       		            data: _data
   	   	       		        }],
   	   	       		     xAxis:{
   	   	       		    	 data:_fundDate
   	   	       		     }
   	   	       	 }
   	   	       	 ); 
   	         });
   	    }
   	    function createDataHtml(){
   	    	$.getJSON(listUrl,function(result){
   	    		$(result.data.content).each(function(){
   	    			//var _html = "<div id='"+this.id+"' style='height:400px'></div>";
   	    			//$("body").append(_html);
   	    			var _option = createOption(this.id,this.name);
   	    			var myChart = echarts.init(document.getElementById(this.id));
   	    	        // 使用刚指定的配置项和数据显示图表。
   	    	        myChart.setOption(_option);
   	    	        initDetailFundData(this.id,myChart);
   	    		})
   	    	})
   	    	
   	    } 
   	 function createOption(id,title){
    	 var _option = {
         	    title: {
         	        text: title,
         	        subtext: id
         	    },
         	    tooltip: {
         	        trigger: 'axis'
         	    },
         	    legend: {
         	        data:['最高气温','最低气温']
         	    },
         	    toolbox: {
         	        show: true
         	    },
         	    xAxis:  {
         	        type: 'category',
         	        boundaryGap: false,
         	        data: []
         	    },
         	    yAxis: {
         	        type: 'value',
         	        min:'dataMin',
         	        max:'dataMax',
         	        axisLabel: {
         	            formatter: '{value}'
         	        }
         	    },
         	    series: [
         	        {
         	            name:'最高净值',
         	            type:'line',
         	            data:[],
         	            markPoint: {
         	                data: [
         	                    {type: 'max', name: '最大值'},
         	                    {type: 'min', name: '最小值'}
         	                ]
         	            },
         	            markLine: {
         	                data: [
         	                    {type: 'average', name: '平均值'}
         	                ]
         	            }
         	        }
         	   
         	    ]
         	};
    	 return _option;
    } 
    </script>
</body>
</html>